<template>
  <v-card flat>
    <v-tabs
      v-model="tab"
      background-color="transparent"
      color="basil"
      show-arrows
      center-active
    >
      <v-tab href="#tab-1">杂谈</v-tab>
      <v-tab href="#tab-2">赞</v-tab>
      <v-tab href="#tab-3">关注</v-tab>
      <v-tab href="#tab-4">粉丝</v-tab>
      <v-tab href="#tab-5">标签</v-tab>
    </v-tabs>
    <v-divider></v-divider>

    <v-tabs-items v-model="tab" color="#eeeeee">
      <v-tab-item value="tab-1">
        <v-card color="#eeeeee" flat class="">
          <v-row no-gutters v-for="(item, index) in maincontent" :key="index">
            <MainContent :maincontent="item" :need_more="1" />
          </v-row>
        </v-card>
      </v-tab-item>
      <v-tab-item value="tab-2">
        <v-card color="#eeeeee" flat class="">
          <v-row no-gutters v-for="(item, index) in maincontent" :key="index">
            <MainContent :maincontent="item" :need_more="1" />
          </v-row>
        </v-card>
      </v-tab-item>
      <v-tab-item style="background-color: #eeeeee" class="pb-2" value="tab-3">
        <v-card color="#eeeeee" flat outlined tile>
          <v-col
            class="px-0 py-0"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
            :key="index"
          >
            <UserTab />
          </v-col>
        </v-card>
      </v-tab-item>
      <v-tab-item style="background-color: #eeeeee" class="pb-2" value="tab-4">
        <v-card color="#eeeeee" flat outlined tile>
          <v-col
            class="px-0 py-0"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
            :key="index"
          >
            <UserTab />
          </v-col>
        </v-card>
      </v-tab-item>
      <v-tab-item style="background-color: #eeeeee" class="pb-2" value="tab-5">
        <v-card color="#eeeeee" flat outlined tile>
          <v-col
            class="px-0 py-0"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
            :key="index"
          >
            <TopicTab />
          </v-col>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      tab: 'tab-1',
      maincontent: [
        {
          id: '1',
          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          username: '杭州_阿里嘎巴创始人',
          sign: '码仔@阿里嘎巴创始人',
          time: '2小时前',
          content:
            'Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.',
          imgList: [
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2101047787,1988938792&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3763867224,1142294674&fm=26&gp=0.jpg',
            // 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3804991923,3110903716&fm=15&gp=0.jpg',
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3667073056,3559130803&fm=26&gp=0.jpg",
            // "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3543167054,844849186&fm=26&gp=0.jpg",
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501995111,4278992844&fm=26&gp=0.jpg",
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2210914355,3427147638&fm=15&gp=0.jpg",
            // "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3434003956,2917065768&fm=26&gp=0.jpg",
            // "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4094147070,2690633137&fm=15&gp=0.jpg"
          ],
        },
        {
          id: '2',

          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          username: '杭州_阿里嘎巴创始人',
          sign: '码仔@阿里嘎巴创始人',
          time: '2小时前',
          content:
            'Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.',
          imgList: [
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2101047787,1988938792&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3763867224,1142294674&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3804991923,3110903716&fm=15&gp=0.jpg',
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3667073056,3559130803&fm=26&gp=0.jpg",
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3543167054,844849186&fm=26&gp=0.jpg',
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501995111,4278992844&fm=26&gp=0.jpg",
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2210914355,3427147638&fm=15&gp=0.jpg",
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3434003956,2917065768&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4094147070,2690633137&fm=15&gp=0.jpg',
          ],
        },
        {
          id: '3',

          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          username: '杭州_阿里嘎巴创始人',
          sign: '码仔@阿里嘎巴创始人',
          time: '2小时前',
          content:
            'Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.',
          imgList: [
            // 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2101047787,1988938792&fm=26&gp=0.jpg',
            // "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3763867224,1142294674&fm=26&gp=0.jpg",
            // 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3804991923,3110903716&fm=15&gp=0.jpg',
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3667073056,3559130803&fm=26&gp=0.jpg",
            // "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3543167054,844849186&fm=26&gp=0.jpg",
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501995111,4278992844&fm=26&gp=0.jpg",
            // "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2210914355,3427147638&fm=15&gp=0.jpg",
            // "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3434003956,2917065768&fm=26&gp=0.jpg",
            // "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4094147070,2690633137&fm=15&gp=0.jpg"
          ],
        },
        {
          id: '4',

          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          username: '杭州_阿里嘎巴创始人',
          sign: '码仔@阿里嘎巴创始人',
          time: '2小时前',
          content:
            'Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.',
          imgList: [
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2101047787,1988938792&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3763867224,1142294674&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3804991923,3110903716&fm=15&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3667073056,3559130803&fm=26&gp=0.jpg',
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3543167054,844849186&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501995111,4278992844&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2210914355,3427147638&fm=15&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3434003956,2917065768&fm=26&gp=0.jpg',
            // "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4094147070,2690633137&fm=15&gp=0.jpg"
          ],
        },
        {
          id: '5',

          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          username: '杭州_阿里嘎巴创始人',
          sign: '码仔@阿里嘎巴创始人',
          time: '2小时前',
          content:
            'Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.',
          imgList: [
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2101047787,1988938792&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3763867224,1142294674&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3804991923,3110903716&fm=15&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3667073056,3559130803&fm=26&gp=0.jpg',
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3543167054,844849186&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501995111,4278992844&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2210914355,3427147638&fm=15&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3434003956,2917065768&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4094147070,2690633137&fm=15&gp=0.jpg',
          ],
        },
      ],
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.tab = 'tab-' + val.query.tab
      },
    },
  },
  created() {
    this.tab = 'tab-' + this.$route.query.tab
  },
}
</script>

<style></style>
